<template>
  <li class="treeview" :class="{active:$store.state.Tab.activeTab===label}">
    <a :href="href" @click="click" :target="target">
      <i :class="[icon]"></i>
      <span>{{label}}</span>
    </a>
  </li>
</template>

<script>
  import {BACK_TOP} from "../../assets/js/utils/ViewUtils"
  import {ADD_CACHED_TAB, SET_ACTIVE_TAB} from "../../store/mutationTypes"

  export default {
    name: "MenuItem",
    props:{
      url: String,
      label: {
        type: String,
        required: true
      },
      href: {
        type: String,
        default:"javascript:void(0)"
      },
      icon: {
        type:String,
        default:"fa fa-circle-o"
      }
    },

    computed: {
      target() {
        return this.href !== "javascript:void(0)"?"_blank":""
      }
    },
    methods: {
      click() {
        if(this.$store.state.Tab.cachedTabs.every(item=>item.label!==this.label)) {
          this.$store.commit(ADD_CACHED_TAB, {label:this.label, url:this.url, closable:true});
        }
        this.$store.commit(SET_ACTIVE_TAB, this.label);
        this.$router.replace(this.url);
        BACK_TOP();
      }
    }
  }
</script>



// WEBPACK FOOTER //
// MenuItem.vue?5ee085ac
